<<<<<<< HEAD
/* * @Author: Zhengxuan Ye * @Date: 2025-05-06 21:26:40 * @Last Modified by: Zhengxuan Ye * @Last
Modified time: 2025-05-06 21:26:40 */
=======
/*
 * @Author: Zhengxuan Ye
 * @Date: 2025-05-06 21:26:40
 * @Last Modified by:   Zhengxuan Ye
 * @Last Modified time: 2025-05-06 21:26:40
 */
>>>>>>> ba93636 (前端建设完成)

<template>
  <div class="app-wrapper">
    <header class="header">
      <div class="container">
        <div class="header-top">
          <router-link to="/" class="logo">中国非物质文化遗产</router-link>
          <div class="mobile-menu-toggle" @click="toggleMobileMenu">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="user-actions" :class="{ 'mobile-visible': mobileMenuOpen }">
            <template v-if="isLoggedIn">
              <span class="username">{{ user.username }}</span>
              <button @click="logout" class="btn-logout">退出</button>
            </template>
            <template v-else>
              <router-link to="/login" class="btn-login">登录</router-link>
              <router-link to="/register" class="btn-register">注册</router-link>
            </template>
          </div>
        </div>
        <nav class="main-nav" :class="{ 'mobile-visible': mobileMenuOpen }">
          <router-link to="/" class="nav-link" @click="closeMobileMenu">首页</router-link>
          <router-link to="/heritage-list" class="nav-link" @click="closeMobileMenu"
            >遗产名录</router-link
          >
          <router-link to="/protection" class="nav-link" @click="closeMobileMenu"
            >保护工作</router-link
          >
          <router-link to="/exhibition" class="nav-link" @click="closeMobileMenu"
            >展示与传承</router-link
          >
          <router-link to="/about" class="nav-link" @click="closeMobileMenu">关于我们</router-link>
          <router-link to="/admin-login" class="nav-link admin-link" @click="closeMobileMenu"
            >管理员登录</router-link
          >
        </nav>
      </div>
    </header>

    <main class="main-content">
      <div class="container">
        <router-view />
      </div>
    </main>

    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于本站</h3>
<<<<<<< HEAD
            <p>
              本网站致力于宣传和普及中国非物质文化遗产知识，推广优秀传统文化。（软件1233叶正轩作品）
            </p>
=======
            <p>本网站致力于宣传和普及中国非物质文化遗产知识，推广优秀传统文化。（软件1233叶正轩作品）</p>
>>>>>>> ba93636 (前端建设完成)
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
              <li><router-link to="/">首页</router-link></li>
              <li><router-link to="/heritage-list">遗产名录</router-link></li>
              <li><router-link to="/protection">保护工作</router-link></li>
              <li><router-link to="/exhibition">展示与传承</router-link></li>
              <li><router-link to="/about">关于我们</router-link></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>邮箱: 2038286370@qq.com</p>
            <p>电话: +86-13640603902</p>
            <p>来源: 软件1233叶正轩</p>
          </div>
        </div>
        <div class="copyright">
          <p>© 2025 khalilYip 版权所有</p>
          <p>图片素材来源：中国非物质文化遗产网、文化和旅游部官网等，仅用于教育目的</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { defineComponent, onMounted, computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from './stores/user'

export default defineComponent({
  name: 'App',
  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    const isLoggedIn = computed(() => userStore.isLoggedIn)
    const user = computed(() => userStore.user)
    const mobileMenuOpen = ref(false)

    onMounted(async () => {
      // 检查是否有保存的token并验证
      console.log('App.vue - 检查用户认证状态')
      console.log('App.vue - 当前token:', userStore.token)

      try {
        // 无论是否有用户信息，只要有token就尝试验证
        if (userStore.token) {
          console.log('App.vue - 检测到token，尝试验证用户身份')
          const success = await userStore.checkAuth()
          console.log('App.vue - 认证结果:', success ? '成功' : '失败')
        } else {
          console.log('App.vue - 未检测到token，用户未登录')
        }

        console.log('App.vue - 认证检查完成，登录状态:', userStore.isLoggedIn)
        console.log('App.vue - 用户信息:', userStore.user)
      } catch (error) {
        console.error('App.vue - 认证检查失败:', error)
        // 出现异常时，确保用户被登出
        userStore.logout()
      }

      // 监听窗口大小变化，自动关闭移动菜单
      window.addEventListener('resize', () => {
        if (window.innerWidth > 768 && mobileMenuOpen.value) {
          mobileMenuOpen.value = false
        }
      })
    })

    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value
      // 当菜单打开时，禁止页面滚动
      if (mobileMenuOpen.value) {
        document.body.style.overflow = 'hidden'
        document.querySelector('.mobile-menu-toggle').classList.add('active')
      } else {
        document.body.style.overflow = ''
        document.querySelector('.mobile-menu-toggle').classList.remove('active')
      }
    }

    const closeMobileMenu = () => {
      if (mobileMenuOpen.value) {
        mobileMenuOpen.value = false
        document.body.style.overflow = ''
        document.querySelector('.mobile-menu-toggle')?.classList.remove('active')
      }
    }

    const logout = () => {
      userStore.logout()
      router.push('/')
      closeMobileMenu()
    }

    return {
      isLoggedIn,
      user,
      logout,
      mobileMenuOpen,
      toggleMobileMenu,
      closeMobileMenu,
    }
  },
})
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&display=swap');

:root {
  /* 敦煌风格配色 */
  --primary-color: #b8860b; /* 金色 */
  --secondary-color: #a0522d; /* 赭石色 */
  --accent-color: #8b4513; /* 深褐色 */
  --dunhuang-blue: #4682b4; /* 敦煌蓝 */
  --dunhuang-green: #2e8b57; /* 敦煌绿 */
  --bg-color: #f5e1be; /* 淡黄色背景 */
  --light-color: #fff8dc; /* 米色 */
  --dark-color: #5d4037; /* 深棕色 */
  --text-color: #3e2723; /* 暗棕色文字 */

  --success-color: #67c23a;
  --danger-color: #f56c6c;
  --border-color: #b8860b;
  --border-radius: 4px;
  --box-shadow: 0 2px 12px 0 rgba(139, 69, 19, 0.1);
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'ZCOOL XiaoWei', sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--bg-color);
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 25L60 40H40L50 25Z" fill="%23B8860B" fill-opacity="0.05"/></svg>');
  background-size: 100px 100px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  display: block;
  overflow-x: hidden;
}

.app-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-x: hidden;
  max-width: 100vw;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.header {
  background-color: var(--light-color);
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--primary-color);
  width: 100%;
  display: flex;
  justify-content: center;
}

.header .container {
  padding: 15px;
  width: 100%;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
}

.logo {
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  font-size: 1.8rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 10;
}

.mobile-menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 3px;
  transition: var(--transition);
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
  transition: var(--transition);
}

.nav-link {
  color: var(--dark-color);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.nav-link:hover,
.router-link-active {
  color: var(--primary-color);
  background-color: rgba(184, 134, 11, 0.1);
}

.admin-link {
  background-color: rgba(184, 134, 11, 0.1);
  border: 1px solid var(--primary-color);
  font-weight: bold;
}

.admin-link:hover {
  background-color: var(--primary-color);
  color: white;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  transition: var(--transition);
}

.username {
  font-weight: bold;
  color: var(--secondary-color);
}

.btn-logout,
.btn-login,
.btn-register {
  padding: 8px 16px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-logout {
  background-color: transparent;
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.btn-logout:hover {
  background-color: var(--danger-color);
  color: white;
}

.btn-login {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.btn-login:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-register {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

.btn-register:hover {
  background-color: var(--accent-color);
}

.main-content {
  min-height: calc(100vh - 180px);
  padding: 30px 0;
  width: 100%;
  overflow-x: hidden;
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-content .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer {
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 40px 0 20px;
  border-top: 3px solid var(--primary-color);
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
  width: 100%;
}

.footer-section h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-family: 'ZCOOL QingKe HuangYou', sans-serif;
  color: var(--primary-color);
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 10px;
}

.footer-section a {
  color: var(--light-color);
  text-decoration: none;
  transition: var(--transition);
}

.footer-section a:hover {
  color: var(--secondary-color);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 248, 220, 0.2);
  font-size: 0.9rem;
  color: #d7ccc8;
}

/* 标准桌面 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    padding: 0 24px;
    width: 100%;
  }

  body {
    display: block;
    place-items: initial;
  }

  .app-wrapper {
    display: flex;
    flex-direction: column;
  }
}

/* 超宽屏幕 */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

/* 平板/小桌面 */
@media (min-width: 769px) and (max-width: 1023px) {
  .container {
    max-width: 100%;
    padding: 0 16px;
  }

  .logo {
    font-size: 1.6rem;
  }

  .main-nav {
    gap: 15px;
  }
}

/* 手机 */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 12px;
  }

  .header-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .logo {
    margin-bottom: 0;
    font-size: 1.5rem;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--light-color);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 5;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    padding: 80px 20px 40px;
    overflow-y: auto;
  }

  .main-nav.mobile-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .user-actions {
    position: absolute;
    top: 70px;
    right: 0;
    flex-direction: column;
    background-color: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 5;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
  }

  .user-actions.mobile-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-link {
    margin-bottom: 5px;
    padding: 10px 15px;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
  }

  .footer-content {
    gap: 20px;
  }
}

/* 小手机 */
@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }

  .logo {
    font-size: 1.3rem;
  }

  .main-nav {
    gap: 5px;
  }

  .nav-link {
    padding: 5px 8px;
    font-size: 0.85rem;
  }

  .btn-logout,
  .btn-login,
  .btn-register {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .footer-section h3 {
    font-size: 1.1rem;
  }
}

/* 菜单按钮动画 */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
</style>
